<!DOCTYPE HTML>
<html size="s">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <!--[if gt IE 9]>< -->
    <link href="../../../dist/main/css/base.css" rel="stylesheet" type="text/css"/>
    <!-- ><![endif]-->
    <!--[if lte IE 9]>
    <link href="../../../dist/main/css/base-ie8.css" rel="stylesheet" type="text/css"/>
    <![endif]-->
    <script type="text/javascript" src="../../../dist/main/js/jq/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="../../../dist/main/js/jq/adapter-1.9.1.js"></script>
    <script type="text/javascript" src="../../../dist/main/js/jcl.js"></script>
    <script type="text/javascript" src="../../../dist/main/js/i18n/code.zh_CN.js"></script>
    <script type="text/javascript" src="../../../dist/main/js/jcl-plugins.js"></script>
    <script type="text/javascript" src="../../../dist/main/js/jcl-ui.js"></script>
    <script type="text/javascript" src="../../../dist/main/js/jcl-jwc.js"></script>
    <script type="text/javascript" src="../asset/js/config.js"></script>
    <script type="text/javascript" src="../asset/js/data.js"></script>
    <script type="text/javascript" src="../../../example/data/data.js"></script>
    <title>移动云-云商品配置</title>
    <style>
        .c_list > ul > li.on {
            background-color: #ededed !important;
        }
    </style>
</head>

<body jwcid="@Body" id="body">
<div jwcid="@Scroller" name="myScroll" id="myScroll">
    <div class="l_padding l_padding-2">
        <!-- 商品基本信息 -->
        <a name="baseInfo"></a>
        <div data-value="2" id="basePart" style="display:block;">
            <div class="c_box c_box-border">
                <div class="c_title">
                    <div class="text">商品信息</div>
                </div>
                <div class="l_padding-2 l_padding-u">
                    <div class="c_form c_form-col-3 c_form-label-7">
                        <ul>
                            <li class="link required">
                                <div class="label">目录选择：</div>
                                <div class="value">
                                    <span class="e_group e_group-full">
                                        <span class="e_groupRight">
                                            <span class="e_ico-search"></span>
                                        </span>
                                        <span class="e_groupMain">
                                            <input jwcid="@TextField" name="searchCategory2" disabled="true"
                                                   value="移动云 > 数据库 > 云数据库Redis" placeholder="关键字筛选"/>
                                        </span>
                                    </span>
                                </div>
                            </li>
                            <li class="link required">
                                <div class="label">品类选择：</div>
                                <div class="value">
                                    <span class="e_group e_group-full">
                                        <span class="e_groupRight">
                                            <span class="e_ico-search"></span>
                                        </span>
                                        <span class="e_groupMain">
                                            <input jwcid="@TextField" name="searchCategory2" disabled="true"
                                                   value="数据库(CIDC-RT-REDIS)" placeholder="关键字筛选"/>
                                        </span>
                                    </span>
                                </div>
                            </li>
                            <li class="link required">
                                <div class="label">商品扩展信息：</div>
                                <div class="value">
                                    <span class="e_group e_group-full">
                                        <span class="e_groupRight">
                                            <span class="e_ico-search"></span>
                                        </span>
                                        <span class="e_groupMain">
                                            <input jwcid="@TextField" name="searchCategory2" disabled="true"
                                                   value="产品责任人、责任人联系方式、责任人电话" placeholder="关键字筛选"/>
                                        </span>
                                    </span>
                                </div>
                            </li>

                            <li class="link required">
                                <div class="label">商品名称：</div>
                                <div class="value">
                                    <input jwcid="@TextField" name="myTextField" value="云数据库Redis"/>
                                </div>
                            </li>
                            <li>
                                <div class="label">商品描述：</div>
                                <div class="value">
                                    <input jwcid="@TextField" name="myTextField" value="Redis是一款内存型数据库"/>
                                </div>
                            </li>
                            <li>
                                <div class="label">商品详情：</div>
                                <div class="value">
                                    <input jwcid="@TextField" name="myTextField"
                                           value="基于双机热备的高可用架构，提供单机、主从、集群等丰富类型 的缓存类型，满足用户高读写性能以及快速数据访问的业务需求"/>
                                </div>
                            </li>
                        </ul>
                    </div>

                    <div class="c_space"></div>

                </div>
            </div>
        </div>

        <!-- 模板配置 -->
        <a name="resInfo"></a>
        <div data-value="1" id="templatePart">
            <div class="c_space-2"></div>
            <div class="c_box c_box-border">
                <div class="c_title">
                    <div class="text">模板选择</div>
                </div>

                <div class="l_padding l_padding-u l_padding-2" id="template">
                    <div class="c_form c_form-col-3 c_form-label-7">
                        <ul>
                            <li>
                                <div class="label">全新配置：</div>
                                <div class="value">
                                        <span jwcid="@Switch" name="cfgSwitch" disabled="false" onText="是" offText="否"
                                              value="off"></span>
                                </div>
                            </li>
                            <li id="copyOffer">
                                <div class="label">复制商品：</div>
                                <div class="value">
											<span class="e_group e_group-full">
												<span class="e_groupRight">
													<span class="e_ico-search"></span>
												</span>
												<span class="e_groupMain">
													<input jwcid="@TextField" name="searchCategory2" disabled="true"
                                                           value="云数据库Redis" placeholder="关键字筛选"/>
												</span>
											</span>
                                </div>
                            </li>
                            <li id="chooseTemplate" style="display: none">
                                <div class="label">选择模板：</div>
                                <div class="value">
                                        <span jwcid="@Select" name="template1" source="ognl:template" addDefault="true"
                                              value="aly"></span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- 资源配置 -->
        <div data-value="3" id="resPart" style="display:block;">
            <div class="c_space-2"></div>
            <div class="c_box c_box-border">
                <div class="c_title">
                    <div class="text">规格配置</div>
                    <div class="fn">
                        <ul>
                            <li ontap="openResourceDialog(true)">
                                <span class="e_ico-add"></span>产品规格配置
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="l_padding-2 l_padding-u">
                    <div class="c_form c_form-col-3 c_form-label-7">
                        <ul>
                            <li class="required">
                                <div class="label">资源池：</div>
                                <div class="value">
                                    <span class="e_group e_group-full">
                                        <span class="e_groupRight">
                                            <span class="e_ico-search"></span>
                                        </span>
                                        <span class="e_groupMain">
                                            <input jwcid="@TextField" name="searchCategory2" disabled="true"
                                                   value="华中节点1" placeholder="关键字筛选"/>
                                        </span>
                                    </span>
                                </div>
                            </li>
                            <li class="required">
                                <div class="label">可用区：</div>
                                <div class="value">
                                    <span class="e_group e_group-full">
                                        <span class="e_groupRight">
                                            <span class="e_ico-search"></span>
                                        </span>
                                        <span class="e_groupMain">
                                            <input jwcid="@TextField" name="searchCategory2" disabled="true"
                                                   value="全区域可用" placeholder="关键字筛选"/>
                                        </span>
                                    </span>
                                </div>
                            </li>
                            <li>
                                <div class="label">资源标签：</div>
                                <div class="value">
                                    <input type="text" jwcid="@TextField" name="resTag" value="内存优化型">
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="c_space-2"></div>
                    <div class="c_list c_list-col-2 c_list-line c_list-space">
                        <ul id="resourcePoolList">
                            <li>
                                <div class="main">
                                    <div class="title e_size-s">标准版单副本32GB</div>
                                    <div class="content">
                                        数据库引擎：Redis，数据库版本：4.0
                                    </div>
                                    <div class="content">
                                        套餐类型：标准套餐，存储类型：高性能数据库
                                    </div>
                                    <div class="content">
                                        架构类型：标准版，节点类型：单副本，实例规格：32G
                                    </div>
                                </div>
                                <div class="op">
                                    <ul>
                                        <li ontap="deleteResourcePool(this)">删除</li>
                                        <li ontap="modifyResourcePool(this)">修改</li>
                                        <li ontap="copyResourcePool(this)">复制到下一行</li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                <div class="main">
                                    <div class="title e_size-s">集群版双副本64GB/8分片</div>
                                    <div class="content">
                                        数据库引擎：Redis，数据库版本：4.0
                                    </div>
                                    <div class="content">
                                        套餐类型：标准套餐，存储类型：高性能数据库
                                    </div>
                                    <div class="content">
                                        架构类型：集群版，节点类型：双副本，分片数量：8，实例规格：64G
                                    </div>
                                </div>
                                <div class="op">
                                    <ul>
                                        <li ontap="deleteResourcePool(this)">删除</li>
                                        <li ontap="modifyResourcePool(this)">修改</li>
                                        <li ontap="copyResourcePool(this)">复制到下一行</li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- 资费配置 -->
        <a name="feeInfo"></a>
        <div data-value="4" id="feePart" style="display:block;">
            <div class="c_space-2"></div>
            <div class="c_box c_box-border">
                <div class="c_title">
                    <div class="text">资费配置</div>
                    <div class="fn">
                        <ul>
                            <li ontap="openTariffDialog(true)">
                                <span class="e_ico-add"></span>商品资费新增
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="l_padding-2 l_padding-u">
                    <table jwcid="@Table" name="myTable" class="c_table c_table-border">
                        <thead>
                        <tr>
                            <th>资费编码</th>
                            <th>资费类型</th>
                            <th>资费名称</th>
                            <th>描述</th>
                            <th>费用</th>
                            <th>费用单位</th>
                            <th>是否折算</th>
                            <th>计费周期</th>
                            <th>计费单位</th>
                            <th>计费类型</th>
                            <th>修改</th>
                            <th>删除</th>
                            <th>复制</th>
                        </tr>
                        </thead>
                        <tbody id="goodsTariffTableBody">
                        <tr>
                            <td><span jwcid="@Insert" value="9200332001"></span></td>
                            <td><span jwcid="@Insert" value="动态计费"></span></td>
                            <td><span jwcid="@Insert" value="Redis产品费用"></span></td>
                            <td><span jwcid="@Insert" value="根据资源属性和计费方式动态计价"></span></td>
                            <td><span jwcid="@Insert" value="0"></span></td>
                            <td><span jwcid="@Insert" value="元"></span></td>
                            <td><span jwcid="@Insert" value="否"></span></td>
                            <td><span jwcid="@Insert" value="按时"></span></td>
                            <td><span jwcid="@Insert" value="hour"></span></td>
                            <td><span jwcid="@Insert" value="预付费"></span></td>
                            <td class="fn">
                                <span class="e_ico-edit" ontap="modifyTariff(this)"></span>
                            </td>
                            <td class="fn">
                                <span class="e_ico-delete" ontap="deleteTariff(this)"></span>
                            </td>
                            <td class="fn">
                                <span class="e_ico-copy" ontap="copyTariff(this)"></span>
                            </td>
                        </tr>
                        <tr>
                            <td><span jwcid="@Insert" value="9200332002"></span></td>
                            <td><span jwcid="@Insert" value="动态计费"></span></td>
                            <td><span jwcid="@Insert" value="Redis产品费用"></span></td>
                            <td><span jwcid="@Insert" value="根据资源属性和计费方式动态计价"></span></td>
                            <td><span jwcid="@Insert" value="0"></span></td>
                            <td><span jwcid="@Insert" value="元"></span></td>
                            <td><span jwcid="@Insert" value="否"></span></td>
                            <td><span jwcid="@Insert" value="包月"></span></td>
                            <td><span jwcid="@Insert" value="month"></span></td>
                            <td><span jwcid="@Insert" value="预付费"></span></td>
                            <td class="fn">
                                <span class="e_ico-edit" ontap="modifyTariff(this)"></span>
                            </td>
                            <td class="fn">
                                <span class="e_ico-delete" ontap="deleteTariff(this)"></span>
                            </td>
                            <td class="fn">
                                <span class="e_ico-copy" ontap="copyTariff(this)"></span>
                            </td>
                        </tr>
                        <tr>
                            <td><span jwcid="@Insert" value="9200332003"></span></td>
                            <td><span jwcid="@Insert" value="动态计费"></span></td>
                            <td><span jwcid="@Insert" value="Redis产品费用"></span></td>
                            <td><span jwcid="@Insert" value="根据资源属性和计费方式动态计价"></span></td>
                            <td><span jwcid="@Insert" value="0"></span></td>
                            <td><span jwcid="@Insert" value="元"></span></td>
                            <td><span jwcid="@Insert" value="否"></span></td>
                            <td><span jwcid="@Insert" value="包月"></span></td>
                            <td><span jwcid="@Insert" value="month"></span></td>
                            <td><span jwcid="@Insert" value="后付费"></span></td>
                            <td class="fn">
                                <span class="e_ico-edit" ontap="modifyTariff(this)"></span>
                            </td>
                            <td class="fn">
                                <span class="e_ico-delete" ontap="deleteTariff(this)"></span>
                            </td>
                            <td class="fn">
                                <span class="e_ico-copy" ontap="copyTariff(this)"></span>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 属性配置 -->
        <a name="saleInfo"></a>
        <div data-value="5" id="attrPart" style="display:block;">
            <div class="c_space-2"></div>
            <div class="c_box c_box-border">
                <div class="c_title">
                    <div class="text">销售属性配置</div>
                    <div class="fn">
                        <ul>
                            <li ontap="showPopup('goodsProp','goodsProp')">
                                <span class="e_ico-add"></span>商品属性新增
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="l_padding-2 l_padding-u">
                    <div class="c_form c_form-col-4 c_form-label-7">
                        <ul id="switchList">
                            <li>
                                <div class="label">七天无理由：</div>
                                <div class="value">
                                            <span jwcid="@Switch" name="mySwitchd1" onText="是" disabled="false"
                                                  offText="否" value="off"></span>
                                </div>
                            </li>
                            <li>
                                <div class="label">自动服开：</div>
                                <div class="value">
                                            <span jwcid="@Switch" name="mySwgitchd1" onText="是" disabled="false"
                                                  offText="否" value="off"></span>
                                </div>
                            </li>
                            <li>
                                <div class="label">自动归档：</div>
                                <div class="value">
                                            <span jwcid="@Switch" name="mySwiftchd1" onText="是" disabled="false"
                                                  offText="否" value="off"></span>
                                </div>
                            </li>
                            <li>
                                <div class="label">是否甩单：</div>
                                <div class="value">
                                            <span jwcid="@Switch" name="mySwietchd1" onText="是" disabled="false"
                                                  offText="否" value="off"></span>
                                </div>
                            </li>
                            <li>
                                <div class="label">独立产品：</div>
                                <div class="value">
                                            <span jwcid="@Switch" name="mySwitdchd1" onText="是" disabled="false"
                                                  offText="否" value="off"></span>
                                </div>
                            </li>
                            <li>
                                <div class="label">免费资源：</div>
                                <div class="value">
                                            <span jwcid="@Switch" name="mySwitcchd1" onText="是" disabled="false"
                                                  offText="否" value="off"></span>
                                </div>
                            </li>
                            <li>
                                <div class="label">自动退订：</div>
                                <div class="value">
                                            <span jwcid="@Switch" name="mySwitchbd1" onText="是" disabled="false"
                                                  offText="否" value="off"></span>
                                </div>
                            </li>
                            <li>
                                <div class="label">二维码支持：</div>
                                <div class="value">
                                            <span jwcid="@Switch" name="mySwitchda1" onText="是" disabled="false"
                                                  offText="否" value="off"></span>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="c_form c_form-col-3 c_form-label-7">
                        <ul id="inputAndSegmentList">
                            <li class="link required">
                                <div class="label">订购模式：</div>
                                <div class="value">
                                            <span jwcid="@Segment" name="mySegment" source="ognl:orderType"
                                                  nullable="no" desc="订购模式" value="0"></span>
                                </div>
                            </li>
                            <li class="link required">
                                <div class="label">定价模式：</div>
                                <div class="value">
                                            <span jwcid="@Segment" name="mySegment1" source="ognl:priceType"
                                                  nullable="no" desc="定价模式" value="0"></span>
                                </div>
                            </li>
                            <li class="link required">
                                <div class="label">组合商品：</div>
                                <div class="value">
                                            <span jwcid="@Switch" name="mySwitch1" onText="是" disabled="false"
                                                  offText="否" value="off"></span>
                                </div>
                            </li>
                            <li class="link required">
                                <div class="label">生效方式：</div>
                                <div class="value">
                                            <span jwcid="@Select" name="validMethod1" source="ognl:validMethod"
                                                  addDefault="true" value="1"></span>
                                </div>
                            </li>
                            <li class="link required">
                                <div class="label">生效时间：</div>
                                <div class="value">
                                    <input jwcid="@DateField" name="myDateField1" dropDown="true"
                                           onafterAction="verifyAll('cond')" format="yyyy-MM-dd HH:mm:ss"/>
                                </div>
                            </li>
                            <li class="link required">
                                <div class="label">生效时间：</div>
                                <div class="value">
                                    <input jwcid="@DateField" name="myDateField2" dropDown="true"
                                           onafterAction="verifyAll('cond')" format="yyyy-MM-dd HH:mm:ss"/>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- 关系配置 -->
        <div data-value="6" id="relPart" style="display:block;">
            <div class="c_space-2"></div>
            <div class="c_box c_box-border">
                <div class="c_title">
                    <div class="text">商品关系配置</div>
                    <div class="fn">
                        <ul>
                            <li>
                                <span class="e_ico-add" ontap="showPopup('goodsRelate','goodsRelate')"></span>商品关系新增
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="l_padding-2 l_padding-u">
                    <table jwcid="@Table" name="myTableGoodsRelation" class="c_table c_table-border">
                        <thead>
                        <tr>
                            <th>关联商品</th>
                            <th>关联关系</th>
                            <th>删除</th>
                        </tr>
                        </thead>
                        <tbody id="relationGoodsList">
                        <tr>
                            <td>云主机</td>
                            <td>依赖</td>
                            <td class="fn">
                                <span class="e_ico-delete" ontap="deleteGoodsRelation(this)"></span>
                            </td>
                        </tr>
                        <tr>
                            <td>云数据库Redis 单副本</td>
                            <td>互斥</td>
                            <td class="fn">
                                <span class="e_ico-delete" ontap="deleteGoodsRelation(this)"></span>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 发布配置 -->
        <div data-value="7" id="publishPart" style="display:block;">
            <div class="c_space-2"></div>
            <div class="c_box c_box-border">
                <div class="c_title">
                    <div class="text">发布配置</div>
                </div>
                <div class="l_padding-2 l_padding-u">
                    <div class="c_form c_form-label-7">
                        <ul>
                            <li>
                                <div class="label">发布环境：</div>
                                <div class="value">
                                    <div class="c_list c_list-s c_list-col-4">
                                        <ul>
                                            <li>
                                                <label class="content link">
                                                    <div class="fn"><input type="checkbox"></div>
                                                    <div class="main">
                                                        <div class="title">亚信开发测试环境</div>
                                                    </div>
                                                </label>
                                            </li>
                                            <li>
                                                <label class="content link">
                                                    <div class="fn"><input type="checkbox"></div>
                                                    <div class="main">
                                                        <div class="title">测试部测试环境</div>
                                                    </div>
                                                </label>
                                            </li>
                                            <li>
                                                <label class="content link">
                                                    <div class="fn"><input type="checkbox"></div>
                                                    <div class="main">
                                                        <div class="title">生产环境</div>
                                                    </div>
                                                </label>
                                            </li>
                                            <li>
                                                <label class="content link">
                                                    <div class="fn"><input type="checkbox"></div>
                                                    <div class="main">
                                                        <div class="title">EBOSS局数据同步</div>
                                                    </div>
                                                </label>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>

                            <li>
                                <div class="label">客户群配置：</div>
                                <div class="value">
                                    <div class="e_mix" ontap="showPopup('customerBase','customerBase')">
                                        <input id="customerBaseNames" type="text" value="政企大客户、党政军">
                                        <span class="e_ico-browse"></span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>

                    <div class="c_space"></div>

                    <div class="c_title">
                        <div class="text e_green" style="font-size: small">发布渠道配置</div>
                        <div class="fn">
<!--                            <ul>-->
<!--                                <li class="e_green" style="font-size: small"><span-->
<!--                                        class="e_ico-add"></span><span>新增发布渠道</span></li>-->
<!--                            </ul>-->
                        </div>
                    </div>

                    <div class="l_grid l_grid-space-2 l_grid-col-3">
                        <ul>
                            <li>
                                <div class="c_box c_box-border c_box-gray">
                                    <div class="c_card">
                                        <div class="main">移动云平台</div>
                                        <div class="fn" tip="复制"><span class="e_ico-copy"></span></div>
                                        <div class="fn" tip="编辑"><span class="e_ico-edit"></span></div>
                                        <div class="fn" tip="删除"><span class="e_ico-delete"></span></div>
                                    </div>
                                    <div class="l_padding l_padding-2 l_padding-u">
                                        <div class="c_list c_list-col-2 c_list-gray c_list-s">
                                            <ul>
                                                <li>
                                                    <label class="group link">
                                                        <div class="fn"><input type="checkbox"
                                                                               checked="checked"/></div>
                                                        <div class="main">产品订购</div>
                                                    </label>
                                                </li>
                                                <li>
                                                    <label class="group link">
                                                        <div class="fn"><input type="checkbox"
                                                                               checked="checked"/></div>
                                                        <div class="main">资费变更</div>
                                                    </label>
                                                </li>
                                                <li>
                                                    <label class="group link">
                                                        <div class="fn"><input type="checkbox"
                                                                               checked="checked"/></div>
                                                        <div class="main">资源变更</div>
                                                    </label>
                                                </li>
                                                <li>
                                                    <label class="group link">
                                                        <div class="fn"><input type="checkbox"
                                                                               checked="checked"/></div>
                                                        <div class="main">产品续订</div>
                                                    </label>
                                                </li>
                                                <li>
                                                    <label class="group link">
                                                        <div class="fn"><input type="checkbox"
                                                                               checked="checked"/></div>
                                                        <div class="main">产品暂停</div>
                                                    </label>
                                                </li>
                                                <li>
                                                    <label class="group link">
                                                        <div class="fn"><input type="checkbox"
                                                                               checked="checked"/></div>
                                                        <div class="main">产品恢复</div>
                                                    </label>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="c_box c_box-border c_box-gray">
                                    <div class="c_card">
                                        <div class="main">EBOSS</div>
                                        <div class="fn" tip="复制"><span class="e_ico-copy"></span></div>
                                        <div class="fn" tip="编辑"><span class="e_ico-edit"></span></div>
                                        <div class="fn" tip="删除"><span class="e_ico-delete"></span></div>
                                    </div>
                                    <div class="l_padding l_padding-2 l_padding-u">
                                        <div class="c_list c_list-col-2 c_list-gray c_list-s">
                                            <ul>
                                                <li>
                                                    <label class="group link">
                                                        <div class="fn"><input type="checkbox"
                                                                               checked="checked"/></div>
                                                        <div class="main">产品订购</div>
                                                    </label>
                                                </li>
                                                <li>
                                                    <label class="group link">
                                                        <div class="fn"><input type="checkbox"
                                                                               checked="checked"/></div>
                                                        <div class="main">资费变更</div>
                                                    </label>
                                                </li>
                                                <li>
                                                    <label class="group link">
                                                        <div class="fn"><input type="checkbox"
                                                                               checked="checked"/></div>
                                                        <div class="main">资源变更</div>
                                                    </label>
                                                </li>
                                                <li>
                                                    <label class="group link">
                                                        <div class="fn"><input type="checkbox"
                                                                               checked="checked"/></div>
                                                        <div class="main">产品续订</div>
                                                    </label>
                                                </li>
                                                <li>
                                                    <label class="group link">
                                                        <div class="fn"><input type="checkbox"
                                                                               checked="checked"/></div>
                                                        <div class="main">产品暂停</div>
                                                    </label>
                                                </li>
                                                <li>
                                                    <label class="group link">
                                                        <div class="fn"><input type="checkbox"
                                                                               checked="checked"/></div>
                                                        <div class="main">产品恢复</div>
                                                    </label>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="c_box c_box-border c_box-gray">
                                    <div class="c_card">
                                        <div class="main">31省</div>
                                        <div class="fn" tip="复制"><span class="e_ico-copy"></span></div>
                                        <div class="fn" tip="编辑"><span class="e_ico-edit"></span></div>
                                        <div class="fn" tip="删除"><span class="e_ico-delete"></span></div>
                                    </div>
                                    <div class="l_padding l_padding-2 l_padding-u">
                                        <div class="c_list c_list-col-2 c_list-gray c_list-s">
                                            <ul>
                                                <li>
                                                    <label class="group link">
                                                        <div class="fn"><input type="checkbox"
                                                                               checked="checked"/></div>
                                                        <div class="main">产品订购</div>
                                                    </label>
                                                </li>
                                                <li>
                                                    <label class="group link">
                                                        <div class="fn"><input type="checkbox"
                                                                               checked="checked"/></div>
                                                        <div class="main">资费变更</div>
                                                    </label>
                                                </li>
                                                <li>
                                                    <label class="group link">
                                                        <div class="fn"><input type="checkbox"
                                                                               checked="checked"/></div>
                                                        <div class="main">资源变更</div>
                                                    </label>
                                                </li>
                                                <li>
                                                    <label class="group link">
                                                        <div class="fn"><input type="checkbox"
                                                                               checked="checked"/></div>
                                                        <div class="main">产品续订</div>
                                                    </label>
                                                </li>
                                                <li>
                                                    <label class="group link">
                                                        <div class="fn"><input type="checkbox"
                                                                               checked="checked"/></div>
                                                        <div class="main">产品暂停</div>
                                                    </label>
                                                </li>
                                                <li>
                                                    <label class="group link">
                                                        <div class="fn"><input type="checkbox"
                                                                               checked="checked"/></div>
                                                        <div class="main">产品恢复</div>
                                                    </label>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="c_space-2"></div>
        <div class="c_submit c_submit-center">
            <button type="button" class="e_button-r e_button-l e_button-blue e_button-outline">重置</button>
            <button type="button" class="e_button-r e_button-l e_button-blue">提交</button>
        </div>
    </div>
</div>
<!-- 资源池弹窗 -->
<div jwcid="@Popup" name="resourcePoolCreate" class="c_popup c_popup-half c_popup-half-hasBg">
    <div class="c_popupGroup">
        <div class="c_popupItem" id="createResourcePool">
            <div class="c_header">
                <div class="back" ontap="backPopup(this)">
                    <span>资源规格配置</span>
                </div>
            </div>
            <div class="c_scroll c_scroll-white c_scroll-float c_scroll-header">
                <div class="l_padding l_padding-2">
                    <div class="c_form c_form-col-2 c_form-label-6">
                        <ul>
                            <li class="link required">
                                <div class="label">资源名称：</div>
                                <div class="value">
                                    <input jwcid="@TextField" desc="资源名称" name="resourceName" value=""
                                           placeholder="请输入资源名称"/>
                                </div>
                            </li>
                            <li class="link required">
                                <div class="label">数据库引擎：</div>
                                <div class="value">
                                        <span jwcid="@Select" desc="数据库引擎" name="engine"
                                              source="ognl:engineList" placeholder="请选择数据库引擎"></span>
                                </div>
                            </li>
                            <li class="link required">
                                <div class="label">数据库版本：</div>
                                <div class="value">
                                    <input jwcid="@TextField" desc="数据库版本" name="version" value=""
                                           placeholder="请输入数据库版本"/>
                                </div>
                            </li>
                            <li class="link required">
                                <div class="label">套餐类型：</div>
                                <div class="value">
                                        <span jwcid="@Select" desc="套餐类型" name="setMealType"
                                              source="ognl:SetMealList" placeholder="请选择套餐类型"></span>
                                </div>
                            </li>
                            <li class="link required">
                                <div class="label">存储类型：</div>
                                <div class="value">
                                        <span jwcid="@Select" desc="存储类型" name="memoryType"
                                              source="ognl:memoryTypeList" placeholder="请选择存储类型"></span>
                                </div>
                            </li>
                            <li class="link required">
                                <div class="label">架构类型：</div>
                                <div class="value">
                                        <span jwcid="@Select" desc="架构类型" name="structType"
                                              source="ognl:structTypeList" placeholder="请选择架构类型"></span>
                                </div>
                            </li>
                            <li class="link required">
                                <div class="label">节点类型：</div>
                                <div class="value">
                                        <span jwcid="@Select" desc="节点类型" name="nodeType"
                                              source="ognl:nodeTypeList" placeholder="请选择节点类型"></span>
                                </div>
                            </li>
                            <li class="link required">
                                <div class="label">分片数量：</div>
                                <div class="value">
                                    <input jwcid="@TextField" desc="分片数量" name="sliceNumber" value=""
                                           placeholder="请输入分片数量"/>
                                </div>
                            </li>
                            <li class="link required">
                                <div class="label">实例规格：</div>
                                <div class="value">
                                    <input jwcid="@TextField" desc="实例规格" name="instanceSpec" value=""
                                           placeholder="请输入实例规格"/>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="c_space"></div>
                    <div class="c_submit c_submit-full">
                        <button type="button" class="e_button e_button-r e_button-l e_button-blue"
                                ontap="addResourcePool(this)">确定
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 商品资费弹窗 -->
<div jwcid="@Popup" name="goodsTariff" class="c_popup c_popup-half c_popup-half-hasBg">
    <div class="c_popupGroup">
        <div class="c_popupItem" id="goodsTariff">
            <div class="c_header">
                <div class="back" ontap="backPopup(this)">
                    <span>商品资费配置</span>
                </div>
            </div>
            <div class="c_scroll c_scroll-white c_scroll-float c_scroll-header">
                <div class="l_padding l_padding-2">
                    <div class="c_form c_form-col-2 c_form-label-6">
                        <ul>
                            <li class="link required">
                                <div class="label">资费编码：</div>
                                <div class="value">
                                    <input jwcid="@TextField" desc="资费编码" name="tariffCode" value=""
                                           placeholder="请输入资费编码"/>
                                </div>
                            </li>
                            <li class="link required">
                                <div class="label">资费类型：</div>
                                <div class="value">
                                        <span jwcid="@Select" desc="资费类型" name="tariffType"
                                              source="ognl:tariffTypeList" placeholder="请选择数据库引擎"></span>
                                </div>
                            </li>
                            <li class="link required">
                                <div class="label">资费名称：</div>
                                <div class="value">
                                    <input jwcid="@TextField" desc="资费名称" name="tariffName" value=""
                                           placeholder="请输入资费名称"/>
                                </div>
                            </li>
                            <li class="link required">
                                <div class="label">资费描述：</div>
                                <div class="value">
                                        <span jwcid="@TextField" desc="资费描述" name="tariffDesc"
                                              placeholder="请输入资费描述"></span>
                                </div>
                            </li>
                            <li class="link required">
                                <div class="label">费用：</div>
                                <div class="value">
                                        <span jwcid="@TextField" desc="费用" name="tariffNumber"
                                              placeholder="请输入费用"></span>
                                </div>
                            </li>
                            <li class="link required">
                                <div class="label">费用单位：</div>
                                <div class="value">
                                        <span jwcid="@Select" desc="费用单位" name="tariffUnit"
                                              source="ognl:tariffUnitList" placeholder="请选择费用单位"></span>
                                </div>
                            </li>
                            <li class="link required">
                                <div class="label">是否折算：</div>
                                <div class="value">
                                        <span jwcid="@Select" desc="是否折算" name="isDiscount"
                                              source="ognl:isDiscountList" placeholder="请选择是否折算"></span>
                                </div>
                            </li>
                            <li class="link required">
                                <div class="label">计费周期：</div>
                                <div class="value">
                                    <input jwcid="@Select" desc="计费周期" name="tariffCompCycle" value=""
                                           source="ognl:tariffCycleList" placeholder="请选择计费周期"/>
                                </div>
                            </li>
                            <li class="link required">
                                <div class="label">计费单位：</div>
                                <div class="value">
                                    <input jwcid="@Select" desc="计费单位" name="tariffCompUnit" value=""
                                           source="ognl:tariffCompUnitList" placeholder="请选择计费单位"/>
                                </div>
                            </li>
                            <li class="link required">
                                <div class="label">计费类型：</div>
                                <div class="value">
                                    <input jwcid="@Select" desc="计费类型" name="tariffCompType" value=""
                                           source="ognl:tariffCompTypeList" placeholder="请选择计费类型"/>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="c_space"></div>
                    <div class="c_submit c_submit-full">
                        <button type="button" class="e_button e_button-r e_button-l e_button-blue"
                                ontap="addTariff(this)">确定
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 商品属性弹窗 -->
<div jwcid="@Popup" name="goodsProp" class="c_popup c_popup-half c_popup-half-hasBg">
    <div class="c_popupGroup">
        <div class="c_popupItem" id="goodsProp">
            <div class="c_header">
                <div class="back" ontap="backPopup(this)">商品属性</div>
            </div>
            <div class="c_scroll c_scroll-white c_scroll-float c_scroll-header">
                <div class="l_padding l_padding-2">
                    <div class="c_form c_form-col-2 c_form-label-4 c_form-submit-h">
                        <div class="submit">
                            <button type="button" class="e_button-blue">查询</button>
                        </div>
                        <ul>
                            <li>
                                <div class="label">属性编码：</div>
                                <div class="value"><input type="text"/></div>
                            </li>
                            <li>
                                <div class="label">属性名称：</div>
                                <div class="value"><input type="text"/></div>
                            </li>
                        </ul>
                    </div>
                    <div class="c_space"></div>
                    <table jwcid="@Table" name="catalogTable" class="c_table c_table-border">
                        <thead>
                        <tr>
                            <th class="fn"></th>
                            <th>属性编码</th>
                            <th>属性名称</th>
                            <th>code</th>
                            <th>type</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td class="fn" ontap="choseProp(this,'input')"><input type="checkbox"></td>
                            <td>710034</td>
                            <td>商品规格</td>
                            <td>goodsSpec</td>
                            <td>input</td>
                        </tr>
                        <tr>
                            <td class="fn" ontap="choseProp(this,'switch')"><input type="checkbox"></td>
                            <td>710032</td>
                            <td>是否促销</td>
                            <td>isPromotion</td>
                            <td>switch</td>
                        </tr>
                        <tr>
                            <td class="fn" ontap="choseProp(this,'segment')"><input type="checkbox"></td>
                            <td>71349</td>
                            <td>订购模式</td>
                            <td>model</td>
                            <td>segment</td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="c_space"></div>
                    <div class="c_submit c_submit-full">
                        <button type="button" class="e_button e_button-r e_button-l e_button-blue"
                                ontap="backPopup(this)">确定
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 商品关系弹窗 -->
<div jwcid="@Popup" name="goodsRelate" class="c_popup c_popup-half c_popup-half-hasBg">
    <div class="c_popupGroup">
        <div class="c_popupItem" id="goodsRelate">
            <div class="c_header">
                <div class="back" ontap="backPopup(this)">商品关系</div>
            </div>
            <div class="c_scroll c_scroll-white c_scroll-float c_scroll-header">
                <div class="l_padding">
                    <div class="c_form c_form-col-1 c_form-label-5 c_form-submit-h" style="margin-bottom:20px;">
                        <ul>
                            <li class="link required">
                                <div class="label">商品关系：</div>
                                <div class="value" style="width:50%;">
                                            <span jwcid="@Select" desc="商品关系" name="goodsRelation"
                                                  source="ognl:relationList"
                                                  placeholder="请选择商品关系"></span>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="c_form c_form-col-2 c_form-label-4 c_form-submit-h">
                        <div class="submit">
                            <button type="button" class="e_button-blue">查询</button>
                        </div>
                        <ul>
                            <li>
                                <div class="label">商品编码：</div>
                                <div class="value"><input type="text"/></div>
                            </li>
                            <li>
                                <div class="label">商品名称：</div>
                                <div class="value"><input type="text"/></div>
                            </li>
                        </ul>
                    </div>
                    <div class="c_space"></div>
                    <table jwcid="@Table" name="goodsTable" class="c_table c_table-border">
                        <thead>
                        <tr>
                            <th class="fn"></th>
                            <th>商品编码</th>
                            <th>属性名称</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td class="fn" ontap="choseGoods(this,'one')"><input type="checkbox"></td>
                            <td>710034</td>
                            <td>商品C</td>
                        </tr>
                        <tr>
                            <td class="fn" ontap="choseGoods(this,'two')"><input type="checkbox"></td>
                            <td>710032</td>
                            <td>商品D</td>
                        </tr>
                        <tr>
                            <td class="fn" ontap="choseGoods(this,'three')"><input type="checkbox"></td>
                            <td>71349</td>
                            <td>商品E</td>
                        </tr>
                        </tbody>
                    </table>
                    <div>
                        <div class="l_queryPage">
                            <div name="myPage" jwcid="@NavBar" cond="queryCond" count="35" part="queryPart"
                                 pageSize="5"></div>
                        </div>
                    </div>
                    <div class="c_space"></div>
                    <div class="c_submit c_submit-full">
                        <button type="button" class="e_button e_button-r e_button-l e_button-blue"
                                ontap="backPopup(this)">确定
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 客户群选择弹窗 -->
<div jwcid="@Popup" name="customerBase" class="c_popup c_popup-half c_popup-half-hasBg">
    <div class="c_popupGroup">
        <div class="c_popupItem" id="customerBase">
            <div class="c_header">
                <div class="back" ontap="backPopup(this)">客户群配置</div>
            </div>
            <div class="c_scroll c_scroll-white c_scroll-float c_scroll-header">
                <div class="l_padding">
                    <div class="c_form c_form-col-2 c_form-label-5 c_form-submit-h">
                        <div class="submit">
                            <button type="button" class="e_button-blue">查询</button>
                        </div>
                        <ul>
                            <li>
                                <div class="label">客户群名称：</div>
                                <div class="value"><input type="text"/></div>
                            </li>
                        </ul>
                    </div>
                    <div class="c_space"></div>
                    <table jwcid="@Table" name="customerTable" class="c_table c_table-border">
                        <thead>
                        <tr>
                            <th class="fn"></th>
                            <th>客户群名称</th>
                            <th>客户群类型</th>
                            <th>客户群说明</th>
                            <th>客户群成员数</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td class="fn" ontap="choseCustomer(this,'one')"><input type="checkbox"></td>
                            <td>政企客户</td>
                            <th>vip客户</th>
                            <th>vip客户群,包含政企客户</th>
                            <th>25</th>
                        </tr>
                        <tr>
                            <td class="fn" ontap="choseCustomer(this,'two')"><input type="checkbox"></td>
                            <td>金融客户</td>
                            <td>高级客户</td>
                            <th>高级客户群,包含金融客户</th>
                            <th>31</th>
                        </tr>
                        <tr>
                            <td class="fn" ontap="choseCustomer(this,'three')"><input type="checkbox"></td>
                            <td>it客户</td>
                            <td>vip客户</td>
                            <th>vip客户群,包含it行业客户</th>
                            <th>46</th>
                        </tr>
                        </tbody>
                    </table>
                    <div>
                        <div class="l_queryPage">
                            <div name="myPage" jwcid="@NavBar" cond="queryCond" count="35" part="queryPart" pageSize="5"></div>
                        </div>
                    </div>
                    <div class="c_space"></div>
                    <div class="c_submit c_submit-full">
                        <button type="button" class="e_button e_button-r e_button-l e_button-blue"
                                ontap="chooseCustomerSure(this)">确定
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var SetMealList = [
        {
            TEXT: "包月套餐一",
            VALUE: "包月套餐一"
        },
        {
            TEXT: "包月套餐二",
            VALUE: "包月套餐二"
        },
        {
            TEXT: "年费套餐",
            VALUE: "年费套餐"
        }
    ];
    var engineList = [
        {
            TEXT: "Redis",
            VALUE: "Redis"
        },
    ];
    var memoryTypeList = [
        {
            TEXT: "高性能数据库",
            VALUE: "高性能数据库"
        },
    ];
    var structTypeList = [
        {
            TEXT: "集群版",
            VALUE: "集群版"
        },
    ];
    var nodeTypeList = [
        {
            TEXT: "单副本",
            VALUE: "单副本"
        },
        {
            TEXT: "双副本",
            VALUE: "双副本"
        },
    ];
    //表示资源规格是否新增
    var rrsourceIsCreate = false;
    //资费配置相关
    var tariffTypeList = [
        {
            TEXT: "动态计费",
            VALUE: "动态计费"
        }
    ];
    var tariffUnitList = [
        {
            TEXT: "元",
            VALUE: "元"
        },
        {
            TEXT: "万元",
            VALUE: "万元"
        },
    ];
    var isDiscountList = [
        {
            TEXT: "是",
            VALUE: "是"
        },
        {
            TEXT: "否",
            VALUE: "否"
        },
    ];
    var tariffCycleList = [
        {
            TEXT: "按时",
            VALUE: "按时"
        },
        {
            TEXT: "包月",
            VALUE: "包月"
        },
    ];
    var tariffCompUnitList = [
        {
            TEXT: "hour",
            VALUE: "hour"
        },
        {
            TEXT: "month",
            VALUE: "month"
        },
        {
            TEXT: "year",
            VALUE: "year"
        },
    ];
    var tariffCompTypeList = [
        {
            TEXT: "预付费",
            VALUE: "预付费"
        },
        {
            TEXT: "后付费",
            VALUE: "后付费"
        }
    ];
    var tariffIsCreate = false;
    //商品关系部分
    var relationList = [
        {
            TEXT: "依赖",
            VALUE: "依赖"
        },
        {
            TEXT: "互斥",
            VALUE: "互斥"
        },
        {
            TEXT: "组合",
            VALUE: "组合"
        }
    ]
    //已选择的客户群名称
    var customerNames=[]

    Wade.setRatio();
    Wade.JWC.init(true);

    //客户群操作部分
    function chooseCustomerSure(element) {
        $("#customerBaseNames").val(customerNames.join());
        backPopup(element);
        customerNames=[]
    }
    function choseCustomer(element,number){
        switch (number) {
            case 'one':
                customerNames.push('政企客户')
                break;
            case 'two':
                customerNames.push('金融客户')
                break;
            case 'three':
                customerNames.push('it客户')
                break;
        }
    }

    //商品关系操作部分
    function choseGoods(element, number) {
        let node = ''
        switch (number) {
            case 'one':
                node =
                    `<tr>
                            <td>商品C</td>
                            <td>${$("#goodsRelation").val()}</td>
                            <td class="fn">
                                <span class="e_ico-delete" ontap="deleteGoodsRelation(this)"></span>
                            </td>
                        </tr>`;
                break;
            case 'two':
                node =
                    `<tr>
                            <td>商品D</td>
                            <td>${$("#goodsRelation").val()}</td>
                            <td class="fn">
                                <span class="e_ico-delete" ontap="deleteGoodsRelation(this)"></span>
                            </td>
                        </tr>`;
                break;
            case 'three':
                node =
                    `<tr>
                            <td>商品E</td>
                            <td>${$("#goodsRelation").val()}</td>
                            <td class="fn">
                                <span class="e_ico-delete" ontap="deleteGoodsRelation(this)"></span>
                            </td>
                        </tr>`;
                break;
        }
        $("#relationGoodsList").append(node)
    }

    //-----属性操作部分
    function choseProp(element, type) {
        let node = ''
        switch (type) {
            case 'input':
                node =
                    `
                   <li class="link required">
                                <div class="label">商品规格：</div>
                                <div class="value">
                                <input type="text" x-wade-uicomponent="textfield" id="myTextField" name="myTextField" autocomplete="off" placeholder="请填写" value="虚拟商品,无" _jwc_uuid="3">
                                </div>
                            </li>`;
                $("#inputAndSegmentList").append(node);
                $("#inputAndSegmentList").trigger("create");
                break;
            case 'switch':
                node =
                    `<li>
                                <div class="label">是否促销：</div>
                                <div class="value">
                            <div tabindex="-1" class="e_switch e_switch-off" _jwc_uuid="46" id="mySwitchd1_div">
                            <div class="e_switchOn">是</div>
                            <div class="e_switchOff">否</div>
                            <input type="hidden" x-wade-uicomponent="switch" id="mySwitchd1" name="mySwitchd1" value="off" x-visible-element="mySwitchd1_div"></div>
                                </div>
                            </li>`;
                $("#switchList").append(node);
                $("#switchList").trigger("create");
                break;
            case  'segment':
                node =
                    `
                     <li class="link required">
                                <div class="label">订购模式：</div>
                                <div class="value">
                    <span tabindex="-1" class="e_segment" _jwc_uuid="54" id="mySegment_span">
                    <span idx="0" class="e_segmentOn" val="0">重复订购</span>
                    <span idx="1" val="1" class="">自动续订</span><input type="hidden" x-wade-uicomponent="segment" id="mySegment" name="mySegment" nullable="no" desc="订购模式" value="0" x-visible-element="mySegment_span">
                    </span></div>
                            </li>`
                $("#inputAndSegmentList").append(node);
                $("#inputAndSegmentList").trigger("create");
                break;
        }
    }

    function deleteGoodsRelation(element) {
        element.parentNode.parentNode.parentNode.removeChild(element.parentNode.parentNode);
    }

    // 资费相关操作
    function openTariffDialog(flag) {
        tariffIsCreate = flag
        showPopup('goodsTariff', 'goodsTariff');
    }

    //新建资费配置
    function addTariff(element) {
        if (tariffIsCreate) {
            //新增
            $("#goodsTariffTableBody").append(
                '<tr>\n' +
                '<td>' + $("#tariffCode").val() + '</td>\n' +
                '<td>' + $("#tariffType").val() + '</td>\n' +
                '<td>' + $("#tariffName").val() + '</td>\n' +
                '<td>' + $("#tariffDesc").val() + '</td>\n' +
                '<td>' + $("#tariffNumber").val() + '</td>\n' +
                '<td>' + $("#tariffUnit").val() + '</td>\n' +
                '<td>' + $("#isDiscount").val() + '</td>\n' +
                '<td>' + $("#tariffCompCycle").val() + '</td>\n' +
                '<td>' + $("#tariffCompUnit").val() + '</td>\n' +
                '<td>' + $("#tariffCompType").val() + '</td>\n' +
                '<td class="fn">\n' +
                ' <span class="e_ico-edit" ontap="modifyTariff(this)"></span>\n' +
                '</td>\n' +
                ' <td class="fn">\n' +
                '<span class="e_ico-delete" ontap="deleteTariff(this)"></span>\n' +
                '</td>\n' +
                '<td class="fn">\n' +
                '<span class="e_ico-copy" ontap="copyTariff(this)"></span>\n' +
                ' </td>\n' +
                ' </tr>'
            );

        } else {
            //编辑
        }
        backPopup(element);
    }

    //复制资费配置
    function copyTariff(element) {
        $("#goodsTariffTableBody").append(element.parentNode.parentNode.cloneNode(true));
    }

    //编辑资费配置
    function modifyTariff(element) {
        openTariffDialog(false)
    }

    //删除资费配置
    function deleteTariff(element) {
        element.parentNode.parentNode.parentNode.removeChild(element.parentNode.parentNode);
    }

    //资源相关操作
    function openResourceDialog(flag) {
        rrsourceIsCreate = flag
        showPopup('resourcePoolCreate', 'createResourcePool');
    }

    //新建资源配置
    function addResourcePool(element) {
        if (rrsourceIsCreate) {
            //新增
            $("#resourcePoolList").append(
                '<li>\n' +
                '<div class="main">\n' +
                '  <div class="title e_size-s">' + $("#resourceName").val() + '</div>\n' +
                '<div class="content">\n' +
                '数据库引擎：' + $("#engine").val() + '，数据库版本：' + $("#version").val() + '\n' +
                '</div>\n' +
                '<div class="content">\n' +
                ' 套餐类型：' + $("#setMealType").val() + '，存储类型：' + $("#memoryType").val() + '\n' +
                '</div>\n' +
                ' <div class="content">\n' +
                '架构类型：' + $("#structType").val() + '，节点类型：' + $("#nodeType").val() + '，实例规格：' + $("#instanceSpec").val() + '\n' +
                ' </div>\n' +
                '</div>\n' +
                '<div class="op">\n' +
                '<ul>\n' +
                '<li ontap="deleteResourcePool(this)">删除</li>\n' +
                '<li ontap="modifyResourcePool(this)">修改</li>\n' +
                '<li ontap="copyResourcePool(this)">复制到下一行</li>\n' +
                '</ul>\n' +
                '</div>\n' +
                ' </li>'
            );
        } else {
            //编辑
        }
        backPopup(element);
    }

    //复制资源配置
    function copyResourcePool(element) {
        $("#resourcePoolList").append(element.parentNode.parentNode.parentNode.cloneNode(true));
    }

    //编辑资源配置
    function modifyResourcePool(element) {
        openResourceDialog(false)
    }

    //删除资源配置
    function deleteResourcePool(element) {
        element.parentNode.parentNode.parentNode.parentNode.removeChild(element.parentNode.parentNode.parentNode);
    }

    // 模板变更事件绑定
    $("#cfgSwitch").change(function () {
        var val = this.value,
            copy = $("#copyOffer"),
            chooser = $("#chooseTemplate");
        copy.hide();
        chooser.hide();
        if (val === 'on') {
            chooser.show();
        } else if (val === 'off') {
            copy.show();
        }
    });

    // 定义时间轴类
    {
        window.TimeLine = function (id) {
            this.id = id;
            this.init();
        }

        window.TimeLine.prototype = {
            lis: {},

            // 初始化时间轴
            init: function () {
                let that = this;
                $("#" + this.id + " ul li").each(function () {
                    let index = $(this).attr("data-value");
                    that.lis[index] = that.wrapperLi(index, this);
                })
            },

            // 包装li
            wrapperLi: function (idx, li) {
                function active() {
                    li.className = "on";

                    // ico下写入html
                    $(li).children("div.ico").html('<div class="text">' + idx + '</div>');
                    $(li).find(".date").removeClass("e_gray");
                }

                function unActive() {
                    li.className = "level-2";

                    // ico下写入html
                    $(li).children("div.ico").html('');
                    $(li).find(".date").addClass("e_gray");
                }

                return {
                    active: active,
                    unActive: unActive
                }
            },

            // 激活指定标签
            active: function (index) {
                index = index + "";
                let li = this.lis[index];
                if (li) {
                    for (let idx in this.lis) {
                        if (idx === index) {
                            li.active();
                        } else {
                            this.lis[idx].unActive();
                        }
                    }
                }
            }
        };
    }

    // 实例化时间轴
    let timeline = new TimeLine("timeline");

    // 绑定时间轴事件
    let parts = [$("#templatePart"), $("#basePart"), $("#resPart"), $("#feePart"), $("#attrPart"), $("#relPart"), $("#publishPart")];
    $(parts).each(function () {
        this.click(function (e) {
            // jq中可以直接获取到代理元素
            let topEle = e.currentTarget || e.delegateTarget;
            if (topEle) {
                let idx = $(topEle).attr("data-value");
                timeline.active(idx);
            }
        });
    });

    // 滚动时判定
    $("#myScroll").scroll(function () {
        let target, offsetTop;
        $(parts).each(function () {
            let top = $(this).offset().top;
            if (offsetTop !== undefined) {
                if (Math.abs(top) > offsetTop) {
                    return;
                }
            }

            offsetTop = Math.abs(top);
            target = this;
        });

        timeline.active(target.attr("data-value"));
    })

    // 打开页面隐藏设置
    let href = location.href;
    let md = href.substr(href.indexOf("#") + 1);
    if (md === "baseInfo") {
        $("#basePart").hide();
        $("#templatePart").hide();
        $("#resPart").hide();
        $("#feePart").hide();
        $("#attrPart").hide();
        $("#relPart").hide();
    } else if (md === "resInfo") {
        $("#feePart").hide();
        $("#attrPart").hide();
        $("#relPart").hide();
    } else if (md === "feeInfo") {
        $("#attrPart").hide();
        $("#relPart").hide();
    }
</script>


</body>

</html>